import React, {Component} from 'react';
import Animate from 'react-smooth';

class Box extends Component {
  constructor (props) {
    super(props);
    this.state = {
      start: false
    };
  }
  fnEnter () {
    this.setState({start: true});
  }
  fnLeave () {
    this.setState({start: false});
  }
  render () {
    return (
      <Animate from="0.5" to="1" attributeName="opacity" canBegin={this.state.start}>
        <div style={{width: 200, height: 200, backgroundColor: 'orange'}} onMouseEnter={this.fnEnter.bind(this)} onMouseLeave={this.fnLeave.bind(this)}>
          center
        </div>
        <div style={{width: 200, height: 200, backgroundColor: 'orange'}} onMouseEnter={this.fnEnter.bind(this)} onMouseLeave={this.fnLeave.bind(this)}>
          center
        </div>
      </Animate>
    )
  }
}

export default Box;
